<template>
  <!-- 面包屑导航 -->
  <div class="roles">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加角色按钮 -->
    <el-button class="dialog" type="success" @click="dialogVisible = true" plain>添加角色</el-button>

    <!-- table栏 -->

    <el-table :data="rolesList" style="width: 100%">
      <el-table-column  type="expand">
         <!-- <p v-if="row.children.length = 0 ? '暂无权限' : '' "></p> -->
        <template v-slot:default = '{row}'>

          <el-row class="one" v-for="one in row.children" :key="one.id">
            <el-col :span="4">
              <el-tag @close="delrights(row, one.id)" closable size="medium">{{ one.authName }}</el-tag>
            </el-col>
            <el-col :span="20">
              <el-row class="tow" v-for = "tow in one.children" :key="tow.id">
                <el-col :span="4">
                  <el-tag @close="delrights(row, tow.id)" closable size="medium" type="success">{{ tow.authName }}</el-tag>
                </el-col>
                <el-col :span="20">
                  <el-tag @close="delrights(row, three.id)" closable size="medium" class="three" type="warning" v-for="three in tow.children" :key="three.id">{{ three.authName }}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="描述"></el-table-column>

      <el-table-column label="操作">
        <!-- 删除角色指定权限 -->
        <template v-slot:default="{row}">
          <el-button @click="editShow(row)" size="small" class="el-icon-edit" type="primary" plain></el-button>
          <el-button @click="delRoles(row.id)" size="small" class="el-icon-delete" type="danger" plain></el-button>
          <el-button @click="assignRights(row)" size="small" class="el-icon-check" type="success" plain>分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

     <!-- 添加角色对话框 -->
    <el-dialog @close = "closeDialog" title="添加角色" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="form.roleDesc" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </span>
    </el-dialog>

     <!-- 修改角色对话框 -->
    <el-dialog
      title="修改角色"
      :visible.sync="editVisible"
      width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
         <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRoles">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 角色授权 -->
    <el-dialog
      title="分配权限"

      :visible.sync="assignVisible"
      width="30%">
      <el-tree
      ref="tree"
      default-expand-all
      show-checkbox
      node-key="id"
      :data="data"
      :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assignVisible = false">取 消</el-button>
        <el-button type="primary" @click="assign">分配</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      rolesList: [],
      form: {
        roleName: '',
        roleDesc: ''
      },
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: ['blur', 'change'] }
        ],
        roleDesc: [
          { required: true, message: '角色描述不能为空', trigger: ['blur', 'change'] }
        ]
      },
      editVisible: false,
      ruleForm: {
        id: '',
        roleName: '',
        roleDesc: ''
      },
      assignVisible: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roleId: ''
    }
  },
  created () {
    this.renderRoles()
  },
  methods: {
    async renderRoles () { // 渲染
      const { meta, data } = await this.$axios.get('roles')
      if (meta.status === 200) {
        this.rolesList = data
        console.log(this.rolesList)
      } else {
        this.$message.error(meta.msg)
      }
    },
    async addRoles () { // 添加
      try {
        await this.$refs.form.validate()
        const { roleName, roleDesc } = this.form
        const { meta } = await this.$axios.post(`roles`, { roleName, roleDesc })
        if (meta.status === 201) {
          this.$message.success(meta.msg)
          this.dialogVisible = false
          this.renderRoles()
        } else {
          this.$message.error(meta.msg)
        }
      } catch (e) {
        console.log(e)
      }
    },
    closeDialog () { // 重置
      this.$refs.form.resetFields()
    },
    editShow (row) { // 显示删除框
      this.editVisible = true
      const { id, roleDesc, roleName } = row
      this.ruleForm.id = id
      this.ruleForm.roleName = roleName
      this.ruleForm.roleDesc = roleDesc
    },
    async editRoles () { // 修改 没有发送sxios
      try {
        await this.$refs.ruleForm.validate()
        const { id, roleName, roleDesc } = this.ruleForm
        const { meta } = await this.$axios.put(`roles/${id}`, { id, roleName, roleDesc })
        if (meta.status === 200) {
          this.$message.success(meta.msg)
          this.editVisible = false
          this.renderRoles()
        } else {
          this.$message.error(meta.msg)
        }
      } catch (e) {
        console.log(e)
      }
    },

    async delRoles (id) { // 删除
      try {
        await this.$confirm('你确定要删除该角色么', '温馨提示', { type: 'warning' })
        const { meta } = await this.$axios.delete(`roles/${id}`)
        console.log(meta)

        if (meta.status === 200) {
          this.$message.success(meta.msg)
          this.renderRoles()
        }
      } catch (e) {
        console.log(e)
      }
    },
    async delrights (row, rightId) { // 删除角色的指定权限
      const { meta, data } = await this.$axios.delete(`roles/${row.id}/rights/${rightId}`)
      if (meta.status === 200) {
        this.$message.success(meta.msg)
        console.log(meta, data)
        row.children = data
      } else {
        this.$message.error(meta.msg)
      }
    },
    async assignRights (row) { // 渲染和树形控件默认选中
      this.assignVisible = true
      this.roleId = row.id
      console.log(this.roleId)

      const { meta, data } = await this.$axios.get(`rights/tree`)
      console.log(meta, data)
      if (meta.status === 200) {
        this.data = data
        const ids = []
        row.children.forEach(one => {
          one.children.forEach(tow => {
            tow.children.forEach(three => {
              ids.push(three.id)
            })
          })
        })
        this.$refs.tree.setCheckedKeys(ids)
      } else {
        this.$message.error(meta.msg)
      }
    },
    async assign () { // 提交角色授权
      const ids = this.$refs.tree.getCheckedKeys()
      const halfs = this.$refs.tree.getHalfCheckedKeys()
      const rids = [...ids, ...halfs].join(',')
      console.log(rids)

      const { meta } = await this.$axios.post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.assignVisible = false
        this.$message.success(meta.msg)
        this.renderRoles()
      } else {
        this.$message.error(meta.msg)
      }
    }

  }

}
</script>

<style lang = 'less' scoped>
.roles {
  .dialog {
    margin-bottom: 20px;
  }
  .one{
    padding:  10px 0;
    border-bottom: 1px dotted #ccc;
    .tow{
      margin-bottom: 10px;
      .three{
        margin-right:5px;
        margin-bottom: 8px;
      }
    }
  }
}

</style>
